<script setup lang="ts">
    let nameArray=["Allen","Bill","Candy","katy","Walter"]
    var a=[1,2,3,4,5,6,7,8]
    let size=a.push(55)//添加在尾部
    let removeEle = a.pop()//删除最后一个元素上并返回
    size=a.unshift(77)//添加在数组头部
    a.shift()//删除第一个元素

    //遍历数组  foreach 修改原数组，map新建一个数组
    nameArray.forEach(function (n){
        console.log(n)
    })
    //filter 过滤（筛选，查找）
    let b= a.filter(function (v){
        return  v>=7;
    })
    //every:判断每个元素是否都满足条件
    let result = a.every(function(value){
        return value>0;
    })

const products=[
    {
        proId:"102",
        proName:"iphone12",
        proSize:4.5,
        proPrice:6999,
        proStatus:0 //0:有效 , 1:已下架
    },
        {
        proId:"103",
        proName:"vivo AAA",
        proSize:5.6,
        proPrice:7999,
        proStatus:0 //0:有效 , 1:已下架
    },
        {
        proId:"104",
        proName:"小米SSS",
        proSize:7,
        proPrice:5999,
        proStatus:1 //0:有效 , 1:已下架
    },
        {
        proId:"105",
        proName:"oppo XXX",
        proSize:4.5,
        proPrice:8222,
        proStatus:1 //0:有效 , 1:已下架
    },
]
    function fun1(){
    //    products.forEach(function (value){
    //     console.log(value)
    //    })
        console.log("1-遍历商品数组")
        products.forEach(p=>{
            console.log(p)
        })

    }

    function fun2(){  
        console.log("2-添加一个新商品在数组中")
        var pro={
            proId:"106",
            proName:"iphone17",
            proSize:5.5,
            proPrice:8222,
            proStatus:0
        }
        products.push(pro);
        products.forEach(p=>{
            console.log(p)
        })
      }
      
    function fun3(){
        console.log("3-删除最后一个商品")
        products.pop()
    }
    function fun4(){
        console.log("4-查询出名称是小米SSS的商品")
        var newArray=products.filter(p=>{
            return p.proName=="小米SSS"
        })
        newArray.forEach(p=>{
            console.log(p)
        })
    }
    function fun5(){
        console.log("5-查询出价格在5000-7000的商品")
        var b=products.filter(p=>{
            return p.proPrice>=5000 && p.proPrice<=7000
        })
        console.log(b)
    }
    function fun6(){
        console.log("6-查询出已下架的商品")
        var c=products.filter(p=>{
            return p.proStatus==1
        })
        console.log(c)
    }
    // ===:判断类型是否相同，不同则直接返回false，若类型相同在比较数值
    // ==：不同类型，转换成同一种类型（字符串和布尔类型会转换成数值），在比较值
    // 业务中 建议使用 === 严格比较
    // let a1=0
    // let a2=''
    // let a3=console.log(a1===a2)
</script>



<template>
    <div>
        
        <h2>1.遍历数组</h2>
        <span v-for="name in nameArray" :key="name">
            {{ name }}，
        </span>
        <h2>2.数组常用的操作</h2>
        push后的a数组：{{a }} size:{{ size }}<br/>
        removeEle:{{ removeEle }}<br/>
        {{ a }}<br/>
        {{ b }}<br/>
        {{ result }}<br/>

        <h2>3. 商品数组的操作</h2>
        <button @click="fun1()">1-遍历商品数组</button><br>
        <button @click="fun2()">2-添加一个新商品在数组中</button><br>
        <button @click="fun3()">3-删除最后一个商品</button><br>
        <button @click="fun4()">4-查询出名称是小米SSS的商品</button><br>
        <button @click="fun5()">5-查询出价格在5000-7000的商品</button><br>
        <button @click="fun6()">6-查询出已下架的商品</button><br>
    </div>
</template>